<template>
  <!--大标题：教学内容展示-->
  <div style="margin: 10px;">
      <span style="font-size: 25px;font-weight: 600;">教学单元内容</span>
      <div style="margin-top: 10px;margin-bottom: 10px;">
          <span style="color: red;font-size: 10px;">注意：学生的课程学习页的章节顺序和此处的章节顺序保持一致，请在此调整好章节顺序！</span>
      </div>
  </div>
  <!--章节展示-->
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item v-for="section in sections" :key="section.sectionId" :name="section.sectionId">
      <template #title>
        <div class="item-header">
          <el-input v-if="section.editing" v-model="section.title" @blur="stopEditing(section)" @keyup.enter="stopEditing(section)" size="small" placeholder="输入标题"></el-input>
          <span v-else @dblclick="startEditing(section)" style="font-size: 20px;">{{ section.title }}</span>
          <el-button class="el-button-icon" @click="startEditing(section)"><el-icon><Edit/></el-icon></el-button>
          <el-button class="el-button-icon" @click="confirmDeleteSection(section.sectionId)"><el-icon><Delete/></el-icon></el-button>
        </div>
      </template>
      <!--小节展示-->
      <el-card class="box-card" shadow="never" v-for="subsect in section.subsections" :key="subsect.subsectId">
          <template #header>
              <div class="clearfix">
              <el-input v-if="subsect.editing" v-model="subsect.subtitle" @blur="stopEditingSubsection(subsect)" @keyup.enter="stopEditingSubsection(subsect)" size="small" placeholder="输入小节标题"></el-input>
              <span v-else @dblclick="startEditingSubsection(subsect)" style="font-size: 17px;font-weight: 600;color: #777;">{{ subsect.subtitle }}</span>
              <el-button class="el-button-icon" @click="startEditingSubsection(subsect)"><el-icon><Edit/></el-icon></el-button>
              <el-button class="el-button-icon" @click="confirmDeleteSubsection(section.sectionId,subsect.subsectId)"><el-icon><Delete/></el-icon></el-button>
              <!--点击编辑课程内容获取对应章节id和小节id跳转到编辑页面的vue-->
              <el-button style="float: right; padding: 3px 0" type="text">
                <!-- <router-link to="/neweditcourse">编辑课程内容</router-link> -->
              <!-- 传id的点击事件 -->
                <!-- <router-link :to="`editcoursecontent/${section.sectionId}/${subsect.subsectId}`">编辑课程内容</router-link> -->
                <p @click="goToNewEditCourse(subsect)">编辑课程内容</p>
              </el-button>
              </div>
          </template>
          <div v-for="(content, index) in subsect.contents" :key="index" class="text item" style="font-size: 15px;font-weight: 500;">
            <span class="radius" >
               <!--小节内容的展示：视频？文档？作业？测试？-->
                <template v-if="content.resource_type === 'video'">视频</template>
                <template v-else-if="content.resource_type === 'ppt'">文档</template>
                <!-- <template v-else-if="content.type === '3'">测试</template>
                <template v-else-if="content.type === '4'">作业</template> -->
            </span>
              {{ content.resource_title }}
          </div>
      </el-card>
      <!--测试展示-->
      <el-card class="box-card" shadow="never" v-for="sectionTest in section.unittestlist" :key="sectionTest.unit_test_id">
          <template #header>
              <div class="clearfix">
              <el-input v-if="sectionTest.editing" v-model="sectionTest.title" @blur="stopEditingsectionTest(sectionTest)" @keyup.enter="stopEditingsectionTest(sectionTest)" size="small" placeholder="输入小节标题"></el-input>
  
              <span v-else @dblclick="startEditingsectionTest(sectionTest)" style="font-size: 17px;font-weight: 600;color: #777;">
                <span style="font-size: 10px;font-weight: 600;color: #777;">测试</span>
                {{ sectionTest.title }}</span>
              <el-button class="el-button-icon" @click="startEditingsectionTest(sectionTest)"><el-icon><Edit/></el-icon></el-button>
              <el-button class="el-button-icon" @click="confirmDeleteSectionTest(section.sectionId,sectionTest.unit_test_id)"><el-icon><Delete/></el-icon></el-button>
              <!--点击编辑课程内容获取对应章节id和小节id跳转到编辑页面的vue-->
              <el-button style="float: right; padding: 3px 0" type="text">
                <router-link :to="{ name: 'AddTest', params: { testId: sectionTest.unit_test_id } }">编辑测试内容</router-link>
              </el-button>
              </div>
          </template>
      </el-card>
      <!--作业展示-->
      <el-card class="box-card" shadow="never" v-for="sectionAssignment in section.homeworklist" :key="sectionAssignment.homework_id">
          <template #header>
              <div class="clearfix">
              <el-input v-if="sectionAssignment.editing" v-model="sectionAssignment.title" @blur="stopEditingSectionAssignment(sectionAssignment)" @keyup.enter="stopEditingSectionAssignment(sectionAssignment)" size="small" placeholder="输入小节标题"></el-input>
              <span v-else @dblclick="startEditingSectionAssignment(sectionAssignment)" style="font-size: 17px;font-weight: 600;color: #777;">
                <span style="font-size: 10px;font-weight: 600;color: #777;">作业</span>
                {{ sectionAssignment.title }}</span>
              <el-button class="el-button-icon" @click="startEditingsectionTest(sectionAssignment)"><el-icon><Edit/></el-icon></el-button>
              <el-button class="el-button-icon" @click="confirmDeleteSectionAssignment(section.sectionId,sectionAssignment.homework_id)"><el-icon><Delete/></el-icon></el-button>
              <!--点击编辑课程内容获取对应章节id和小节id跳转到编辑页面的vue-->
              <el-button style="float: right; padding: 3px 0" type="text">
                <router-link  :to="{ name: 'AddHmkDetail', params: { hmkId: sectionAssignment.homework_id } }">编辑作业内容</router-link>
              </el-button>
              </div>
          </template>
      </el-card>
      <!--添加小节-->
      <el-row style="margin-top: 20px;" padding="20px">
          <!-- 添加小节对话框 -->
          <el-dialog title="添加小节" v-model="addSubsectionDialogVisible" width="30%">
            <el-form ref="postForm" :model="newSubsection" label-width="80px">
              <!--小节标题-->
              <el-form-item label="标题" required>
                <el-input type="input" v-model="newSubsection.subtitle" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-form>
            <template v-slot:footer>
              <span class="dialog-footer">
                <el-button @click="addSubsectionDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubsection(section.sectionId)">添 加</el-button>
              </span>
            </template>
          </el-dialog>
          <!-- 添加测试对话框 -->
          <el-dialog title="添加测试" v-model="addSectionTestDialogVisible" width="30%">
            <el-form ref="postForm" :model="newSectionTest" label-width="80px">
              <!--测试标题-->
              <el-form-item label="标题" required>
                <el-input type="input" v-model="newSectionTest.testTitle" placeholder="请输入测试标题"></el-input>
              </el-form-item>
            </el-form>
            <template v-slot:footer>
              <span class="dialog-footer">
                <el-button @click="addSectionTestDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSectionTest(section.sectionId)">添 加</el-button>
              </span>
            </template>
          </el-dialog>

          <!-- 添加作业对话框 -->
          <el-dialog title="添加作业" v-model="addSectionAssignmentDialogVisible" width="30%">
            <el-form ref="postForm" :model="newsectionAssignment" label-width="80px">
              <!--作业标题-->
              <el-form-item label="标题" required>
                <el-input type="input" v-model="newsectionAssignment.assignmentTitle" placeholder="请输入作业标题"></el-input>
              </el-form-item>
            </el-form>
            <template v-slot:footer>
              <span class="dialog-footer">
                <el-button @click="addSectionAssignmentDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSectionAssignment(section.sectionId)">添 加</el-button>
              </span>
            </template>
          </el-dialog>
          <el-button @click="openAddSubsectionDialog(section.sectionId)">添加小节</el-button>
          <el-button  @click="openAddSectionTestDialog(section.sectionId)">添加测试</el-button>
          <el-button @click="openAddSectionAssignmentDialog(section.sectionId)">添加作业</el-button>
      </el-row>
    <div v-if="expandedIndexes.includes(section.sectionId)"> 
    </div>
    </el-collapse-item>
  </el-collapse>
  <!-- 添加章节对话框 -->
  <el-row style="margin-top: 20px;" padding="20px"><el-button type="primary" @click="addSectionDialogVisible = true">添加章节</el-button></el-row>
  <el-dialog title="添加章节" v-model="addSectionDialogVisible" width="30%">
    <el-form ref="postForm" :model="newSection" label-width="80px">
      <!--章节标题-->
      <el-form-item label="标题" required>
        <el-input type="input" v-model="newSection.title" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="addSectionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSection">添 加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
// import api from '.../api/axios';
import { ElButton, ElInput, ElCollapse, ElCollapseItem, ElDialog, ElForm, ElFormItem,ElMessage, ElMessageBox, ElIcon } from 'element-plus';
import api from '@/api/axios'; 

export default {
components: {
  ElButton,
  ElInput,
  ElCollapse,
  ElCollapseItem,
  ElDialog,
  ElForm,
  ElFormItem,
  ElIcon
},
data() {
  return {
    activeNames: [],
    previousActiveNames: [],  // 上一个激活的面板名数组
    addSectionDialogVisible: false, // 控制添加章节对话框的显示
    addSubsectionDialogVisible: false, // 控制添加小节对话框的显示
    addSectionTestDialogVisible:false,// 控制添加测试对话框的显示
    addSectionAssignmentDialogVisible:false,// 控制添加作业对话框的显示
    // 作业数据
    assignments: [
        { name: '作业1', startTime: '2024-07-12', endTime: '2024-07-15' },
        { name: '作业2', startTime: '2024-07-13', endTime: '2024-07-16' },
        { name: '作业3', startTime: '2024-07-14', endTime: '2024-07-17' }
      ],//列表a的数据
    unitHomework: {
        unit_id:'',
        maxscore:100,
        title: '',
        content: '',
        startTime: '',
        endTime: '',
        Url:null,
        status:-1
      },
    sections: [
      {
        sectionId: '1',
        title: '章节1',
        editing: false,
        sectionTest:[//每个章节的测试
          {
            // testId:'1',
            // testTitle: '测试1',
            editing: false,
          }
        ],
        sectionAssignment:[//每个章节的作业
          {
            // assignmentId:'1',
            // assignmentTitle: '作业1',
            editing: false,
          }
        ],
        subsections: [ // 每个章节的子小节
        {
          subsectId: '1',
          subtitle: '小节1',
          contents: [
          {
              resource_type:'1',
              resource_title:'视频1',
            },
            {
              resource_type:'2',
              resource_title:'文档1',
          }
          ],
          editing: false,
        },
        {
            subsectId: '2',
            subtitle: '小节2',
            homeworklist:[],
            contents: [
            {
              resource_type:'1',
              resource_title:'视频1',
            },
            {
              resource_type:'2',
              resource_title:'文档1',
          }
            ],
          editing: false,
        }
      ]
      },
      {
        sectionId: '2',
        title: '章节1',
        editing: false,
        sectionTest:[//每个章节的测试
          {
            // testId:'2',
            // testTitle: '测试2',
            editing: false,
          }
        ],
        sectionAssignment:[//每个章节的作业
          {
            // assignmentId:'2',
            // assignmentTitle: '作业2',
            editing: false,
          }
        ],
        subsections: [ // 每个章节的子小节
        {
          subsectId: '1',
          subtitle: '小节1',
          contents: [
            {
              resource_type:'1',
              resource_title:'视频1',
            },
            {
              resource_type:'2',
              resource_title:'文档1',
          }
          ],
          editing: false,
        },
        {
            subsectId: '2',
            subtitle: '小节2',
            contents: [
            {
              resource_type:'1',
              resource_title:'视频1',
            },
            {
              resource_type:'2',
              resource_title:'文档1',
          }
            ],
          editing: false,
        }
      ]
      }
    ],
    newSection: {
      title: ''
    },
    newSubsection: {
      subtitle: ''
    },
    newSectionTest: {
      testTitle: ''
    },
    newsectionAssignment: {
      assignmentTitle: ''
    },
    currentSectionId: null, // 当前正在添加小节的章节 ID
    expandedIndexes: [], // 用于存储所有展开的列表项的索引
    // semester_id:this.$route.params.semester_id,
    semester_id:''
  };
},
created(){
  // this.fetchUnits(this.semester_id)
  
  this.semester_id = localStorage.getItem("semester_id");
  console.log('收到本地semester_id：', this.semester_id);
  this.fetchUnits(this.semester_id)
},
methods: {
  

  //根据章节id查找小节
 async fetchSub(id){
   await api.FetchSub(id).then(response=>{
      if(response.data.status===1)
     { 
      const section=this.sections.find(sec=>sec.sectionId==id)
      section.subsections=[]
      const resList=response.data.data
      console.log('resList',resList)
      resList.subunitlist.map(item=>{
        if(item!=null){
          var temp={
          subsectId:item.unit_id,
          subtitle:item.unit_title,
          contents:item.resourceslist,
        }
          section.subsections.push(temp)
        }
      })
      section.homeworklist=resList.homeworklist
      section.unittestlist=resList.unittestlist
      console.log("77777"+JSON.stringify(section, null, 2))
      console.log("啊啊啊啊"+JSON.stringify(response.data.data, null, 2))
     }
      else
      this.remindMsg("单元列表连接失败！",0)
    }).catch(error => {
      console.error('连接失败', error);
    });
  },
  //点击编辑课程内容传参跳转
  goToNewEditCourse(subsect){
    console.log('this',subsect)
    const id = subsect.subsectId;       // 你要传递的 ID
      const name = subsect.subtitle;  // 你要传递的字符串
      this.$router.push({ name: 'NewEditCourse', params: { id, name } });
  },
  //获取单元列表
  fetchUnits(id){
    console.log("有人吗！！！1")
    api.fetchUnitsBySemId(id).then(response=>{
      if(response.data.status===1)
      this.sections=response.data.data.map(unit=>({
        sectionId:unit.unit_id,
        title:unit.unit_title,
        editing:false,
        subsections:[]
      }));
      else
      alert("单元列表连接失败！")
    }).catch(error => {
      console.error('数据获取失败', error);
    });
  },
  //提示框
  remindMsg(str,code){
    //1成功，0失败
    if(code==1)
    ElMessage({
          type: 'success',
          message: str
        });
        else{
          ElMessage({
          type: 'error',
          message: str
        });
        }
  },
  //修改单元名称
  async  updateUnittitle(data){
   await api.UpdateUnitTitle(data).then(response=>{
      if(response.data.status===1)
      this.remindMsg("修改成功！",1)
      else
      this.remindMsg("修改失败！",0)
    }).catch(error => {
      console.error('数据获取失败', error);
    });
  },
  //修改作业
  async  updateHmktitle(data){
   await api.UpdateHmkTitle(data).then(response=>{
      if(response.data.status===1)
      this.remindMsg("修改成功！",1)
      else
      this.remindMsg("修改失败！",0)
    }).catch(error => {
      console.error('数据获取失败', error);
    });
  },
    //修改测试
    async  updateTesttitle(data){
   await api.UpdateTestTitle(data).then(response=>{
      if(response.data.status===1)
      this.remindMsg("修改成功！",1)
      else
      this.remindMsg("修改失败！",0)
    }).catch(error => {
      console.error('数据获取失败', error);
    });
  },
  handleChange(newActiveNames) {
      // 计算被展开的面板名
      const addedNames = newActiveNames.filter(name => !this.previousActiveNames.includes(name));
      // 计算被折叠的面板名
      const removedNames = this.previousActiveNames.filter(name => !newActiveNames.includes(name));
      console.log('被展开的面板名:', addedNames);
      if(addedNames[0]>-1)
      this.fetchSub(addedNames[0]);
      console.log('被折叠的面板名:', removedNames);
      const idx = this.expandedIndexes.indexOf(removedNames[0]);
      if (idx > -1) {
        // 如果当前索引已存在于展开列表中，则移除它
        this.expandedIndexes.splice(idx, 1);
      }
      console.log(this.expandedIndexes)
    },
  //章节标题修改
    startEditing(section) {
      section.editing = true;
    },
    stopEditing(section) {
    if(section.editing){
    const data={
      unit_id:section.sectionId,
      unit_title:section.title
    }
    this.updateUnittitle(data);
    }
      section.editing = false;
    },
    //小节标题修改
    startEditingSubsection(subsect) {
      subsect.editing = true;
    },
    stopEditingSubsection(subsect) {
      if(subsect.editing){
      const data={
      unit_id:subsect.subsectId,
      unit_title:subsect.subtitle
    }
    this.updateUnittitle(data);
    }
      subsect.editing = false;
    },
    //作业标题修改
    startEditingSectionAssignment(sectionAssignment) {
      sectionAssignment.editing = true;
    },
    stopEditingSectionAssignment(sectionAssignment){
      if(sectionAssignment.editing){
      const data={
        homework_id:sectionAssignment.homework_id,
        title:sectionAssignment.title
    }
    this.updateHmktitle(data);
    }
      sectionAssignment.editing = false;
    },
    //测试标题修改
    startEditingsectionTest(sectionTest) {
      sectionTest.editing = true;
    },
    stopEditingsectionTest(sectionTest){
      if(sectionTest.editing){
      const data={
      unit_test_id:sectionTest.unit_test_id,
      title:sectionTest.title
    }
    this.updateTesttitle(data);
    }
      sectionTest.editing = false;
    },
    

  async deleteUnit(id){
    await api.DeleteUnit(id).then(response=>{
      if(response.data.status===1)
        {
            ElMessage({
          type: 'success',
          message: '删除成功!'
        });
        }
      else
      {
          ElMessage({
          type: 'error',
          message: '删除失败!'
        });
        }
    }).catch(error => {
      console.error('数据获取失败', error);
    });
  },
  async deleteTest(id){
    await api.DeleteTest(id).then(response=>{
      if(response.data.status===1)
        {
            ElMessage({
          type: 'success',
          message: '删除成功!'
        });
        }
      else
      {
          ElMessage({
          type: 'error',
          message: '删除失败!'
        });
        }
    }).catch(error => {
      console.error('数据获取失败', error);
    });
  },
  async deleteHmk(id){
    await api.DeleteHmk(id).then(response=>{
      if(response.data.status===1)
        {
            ElMessage({
          type: 'success',
          message: '删除成功!'
        });
        }
      else
      {
          ElMessage({
          type: 'error',
          message: '删除失败!'
        });
        }
    }).catch(error => {
      console.error('数据获取失败', error);
    });
  },
  //删除章节
  confirmDeleteSection(sectionId) {
    ElMessageBox.confirm(
      '确定删除此章节吗？',
      '删除确认',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      this.deleteSection(sectionId);
    }).catch(() => {
      console.log('删除操作已取消');
    });
  },
  deleteSection(sectionId) {
    this.deleteUnit(sectionId);
    this.sections = this.sections.filter(section => section.sectionId !== sectionId);
  },
  //删除测试
  confirmDeleteSectionTest(sectionId, testId) {
    ElMessageBox.confirm(
      '确定删除此测试吗？',
      '删除确认',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      this.deleteSectionTest(sectionId, testId);
    }).catch(() => {
      console.log('删除操作已取消');
    });
  },
  deleteSectionTest(sectionId, testId) {
    const section = this.sections.find(sec => sec.sectionId === sectionId);
    if (section) {
      section.unittestlist = section.unittestlist.filter(sectionTest => sectionTest.unit_test_id !== testId);
      this.deleteTest(testId);
    }
  },
  //删除作业
  confirmDeleteSectionAssignment(sectionId, assignmentId) {
    ElMessageBox.confirm(
      '确定删除此作业吗？',
      '删除确认',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      this.deleteSectionAssignment(sectionId, assignmentId);
    }).catch(() => {
      console.log('删除操作已取消');
    });
  },
  deleteSectionAssignment(sectionId, assignmentId) {
    const section = this.sections.find(sec => sec.sectionId === sectionId);
    if (section) {
      section.homeworklist = section.homeworklist.filter( sectionAssignment=> sectionAssignment.homework_id !== assignmentId);
      this.deleteHmk(assignmentId);
    }
  },
  //删除小节
  confirmDeleteSubsection(sectionId, subsectId) {
    ElMessageBox.confirm(
      '确定删除此小节吗？',
      '删除确认',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      this.deleteSubsection(sectionId, subsectId);
    }).catch(() => {
      console.log('删除操作已取消');
    });
  },
  deleteSubsection(sectionId, subsectId) {
    const section = this.sections.find(sec => sec.sectionId === sectionId);
    if (section) {
      section.subsections = section.subsections.filter(subsect => subsect.subsectId !== subsectId);
      this.deleteUnit(subsectId);
    }
  },
  
  //后端add章节
  addUnitSection(unit){
    api.AddUnit(unit).then(response=>{
      if(response.data.status===1){
        this.remindMsg("添加成功！",1)
        const newSection = {
      sectionId: response.data.data.unit_id, // 生成新的章节 ID
      title: this.newSection.title,
      editing: false,
      subsections: []
    };
    this.sections.push(newSection);
    this.addSectionDialogVisible = false;
    this.resetNewSection();
      }else{
        this.remindMsg("添加失败！",0);
      }
    }).catch(error => {
      console.error('连接失败', error);
    });
  },
  //添加章节
  addSection() {
    if (!this.newSection.title) {
      this.$message.error('章节标题不能为空');
      return;
    }
    const unit={
      semester_id:this.semester_id,
      unit_title:this.newSection.title
    }
    //上后端
    this.addUnitSection(unit);
  },
  resetNewSection() {
    this.newSection = {
      title: ''
    };
  },
  //打开添加小节对话框
  openAddSubsectionDialog(sectionId) {
    this.currentSectionId = sectionId;
    this.addSubsectionDialogVisible = true;
    // this.remindMsg(sectionId,1);
  },
  //打开添加测试对话框
  openAddSectionTestDialog(sectionId){
    this.currentSectionId = sectionId;
    this.addSectionTestDialogVisible = true;
    // this.remindMsg(sectionId,1);
  },
  //打开添加测试对话框
  openAddSectionAssignmentDialog(sectionId){
    this.currentSectionId = sectionId;
    this.addSectionAssignmentDialogVisible = true;
    // this.remindMsg(sectionId,1);
  },
  //跳转添加测试
  toAddTest() {
      this.$router.push('/onlinecourse/addtest');
    },
    //展开作业
    openHomework(index){
      const idx = this.expandedIndexes.indexOf(index);
      if (idx > -1) {
        // 如果当前索引已存在于展开列表中，则移除它
        this.expandedIndexes.splice(idx, 1);
      } else {
        // 否则，添加到展开列表中
        this.expandedIndexes.push(index);
      }
    },
    //后端add作业
    addHmk(data){
        api.AddHmk(data).then(response=>{
        if(response.data.status===1){
          this.remindMsg("添加成功！",1)
          //查找当前测试的父章节id
      const section = this.sections.find(sec => sec.sectionId === this.currentSectionId);
      if (section) {
          section.homeworklist.push(response.data.data);
        }
        this.addSectionAssignmentDialogVisible = false;
        this.resetnewsectionAssignment();

        }else{
          this.remindMsg("添加失败！",0);
        }
      }).catch(error => {
        console.error('连接失败', error);
      });
    },
    //后端add测试
    addTest(data){
      api.AddTest(data).then(response=>{
      if(response.data.status===1){
        this.remindMsg("添加成功！",1)
        //查找当前测试的父章节id
    const section = this.sections.find(sec => sec.sectionId === this.currentSectionId);
    if (section) {
        section.unittestlist.push(response.data.data);
      }
      this.addSectionTestDialogVisible = false;
      this.resetnewSectionTest();

      }else{
        this.remindMsg("添加失败！",0);
      }
    }).catch(error => {
      console.error('连接失败', error);
    });
    },
    //后端add小节
  addUnitSubsection(unit){
    api.AddUnit(unit).then(response=>{
      if(response.data.status===1){
        this.remindMsg("添加成功！",1)
        
    const section = this.sections.find(sec => sec.sectionId === this.currentSectionId);
    if (section) {
      const newSubsection = {
        subsectId: response.data.data.unit_id,
        subtitle: this.newSubsection.subtitle,
        contents: [],
        editing: false
        };
        section.subsections.push(newSubsection);
      }
      this.addSubsectionDialogVisible = false;
      this.resetNewSubsection();

      }else{
        this.remindMsg("添加失败！",0);
      }
    }).catch(error => {
      console.error('连接失败', error);
    });
  },
  //添加小节
  addSubsection(fatherId) {
    if (!this.newSubsection.subtitle) {
      this.$message.error('小节标题不能为空');
      return;
    }
    const unit={
      unit_module:fatherId,
      unit_title:this.newSubsection.subtitle
    }
    this.addUnitSubsection(unit);
  },
  resetNewSubsection() {
    this.newSubsection = {
      subtitle: ''
    };
  },
  //添加测试
  addSectionTest(unit_id) {//fatherId
    if (!this.newSectionTest.testTitle) {
      this.$message.error('测试标题不能为空');
      return;
    }
    
    const data={
      unit_id:unit_id,
      title:this.newSectionTest.testTitle
    }
    this.addTest(data);//后端添加测试
    
  },
  resetnewSectionTest() {
    this.newSectionTest = {
      testTitle: ''
    };
  },
  //添加作业
  addSectionAssignment(unit_id) {//fatherId
    if (!this.newsectionAssignment.assignmentTitle) {
      this.$message.error('作业标题不能为空');
      return;
    }
    
    const data={
      unit_id:unit_id,
      title:this.newsectionAssignment.assignmentTitle
    }
    this.addHmk(data);//后端添加测试
    
  },
  resetnewsectionAssignment() {
    this.newsectionAssignment = {
      assignmentTitle: ''
    };
  }

},
watch: {
    activeNames(newVal) {
      this.previousActiveNames = newVal;
    }
  }
}
</script>

<style scoped>
.item-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.item-header span {
font-weight: bold;
cursor: pointer;
}
.el-input {
width: auto;
margin-right: 8px;
}
.el-button {
margin-left: 4px;
}
.box-card {
border-left: none;  
border-right: none; 
}
::v-deep .box-card .el-card__header {
border-bottom: none; /* 去除卡片头部的底部边框 */
height: 10px;
}
.el-button-icon {
border: none;
margin-left: 10px;
padding: 0;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
.radius{
  font-size: 10px;color: gray;
  border: 1px solid var(--el-border-color);
  border-radius: 15%;
  padding: 2px;
  margin-top: 20px;
} 
.form-list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}
.form-list li {
  margin-bottom: 15px;
  flex: 0 0 calc(50% - 10px); /* 计算每个列表项的宽度，50% 减去一定的间隔 */
  max-width: calc(50% - 10px); /* 设置每个列表项的最大宽度 */
  box-sizing: border-box;
  padding-right: 10px; /* 右侧间隔 */
}

.form-list label {
  display: block;
  margin: 5px;
  color: #484848;
}

.form-list input[type="text"],
.form-list textarea,
.form-list input[type="datetime-local"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  color: #6c6c6c;
}

.form-list textarea {
  resize: vertical;
}
</style>
